<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="itemActive"><slot name="item-text"></slot></div>
<!--    <img src="../assets/img/tabbar/home.png" alt="">-->
<!--    首页-->
  </div>
</template>

<script>
  export default {
    name: "TabBarItem",
    props:{
      path: String,
      itemColor: {
        type: String,
        default: 'red',
      }

    },
    data(){
      return{
        //isActive: true
      }
    },
    computed:{
      isActive(){
        //查找正在活跃的路径和上面穿的path进行对比，如果 ==-1就是没有找到，那就是false
        //因为我们需要true，不需要false，所以需要取反

        return this.$route.path.indexOf(this.path) !== -1
      },
      itemActive(){
        return  this.isActive ? {color: this.itemColor}: {}
      }
    },
    methods:{
      itemClick(){
        //给item添加对应的点击事件，获取到app传来的path路径
        this.$router.push(this.path)
        console.log(this.path);
        console.log(this.$route.path.indexOf(this.path));
      }
    }
  }
</script>

<style scoped>
  .active{
    color: red;
  }

  .tab-bar-item{
    /*  让他们等式分离*/
    flex: 1;
    /*  设置字体居中*/
    text-align: center;
    /*  设置tabbar的高度，一般的高度都是49，所以这个不用管，基本上都是49*/
    height: 49px;
    /*  设置字体*/
    font-size: 14px;
  }

  .tab-bar-item img{
    /*  设置图片的宽高*/
    height: 24px;
    width: 24px;
    /*  图片距离顶部*/
    margin-top: 3px;
    /*  这个是去除图片下自带的3px像素*/
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>
